<template>
	<div class="w-full loop-count" :class="isRuning || isDisabled ? 'opacity-50' : ''">
		<div class="text-[#96A5AA] text-base h-[18px] leading-[18px] moneybox f-style">
			<span class="text-[14px]">{{ $t('miniGames.stopOnLoss') }}</span>
			<span class="text-[12px]">
				<base-amount :value="CloopNum" :currency="currency" hide-currency reverse-fiat />
			</span>
		</div>
		<n-input-group
			class="mt-[4px] rounded-[4px] b-shadow h-[40px]"
			size="large"
			:style="{ pointerEvents: isRuning || isDisabled ? 'none' : '' }">
			<n-input
				size="large"
				:disabled="isRuning || isDisabled"
				class="flex-1 input-style rounded-[4px]"
				v-model:value="CloopNum"
				:allow-input="onlyAllowNumber"
				:on-blur="handleBlur"
				:on-input="changeLoss"
				:on-focus="handleSelect"
				ref="inputInstRef">
				<template #suffix>
					<div
						class="flex items-center flex-col mr-6 text-[10px] w-[14px] rounded-[2px]"
						style="background-color: #3e4c68">
						<base-icon class="point" name="superior" @click="add" />
						<base-icon class="point" name="down" @click="down" />
					</div>
					<div class="w-[24px] h-full flex justify-center items-center text-[24px]">
						<BaseCurrencyFait />
					</div>
				</template>
			</n-input>
		</n-input-group>
	</div>
</template>
<script lang="ts" setup>
import { NInput, NInputGroup } from 'naive-ui'
import { BaseAmount, BaseCurrencyFait, BaseIcon } from '@/components/base'
import { ref, watch, computed, onMounted } from 'vue'
import { useWalletStore } from '@/store'
import { transferToNumber, getDecimalPlaces, setGameCacheData, getGameCacheData } from '../../util'
import type { InputInst } from 'naive-ui'

const walletStore = useWalletStore()
const currency = computed(() => walletStore.balanceCur?.currency)
const props = defineProps({
	isRuning: {
		type: Boolean,
		default: false
	},
	loopNum: {
		type: Number,
		default: 0
	},
	isDisabled: {
		type: Boolean,
		default: false
	}
})
let CloopNum = ref<any>('0')
const inputInstRef = ref<InputInst | null>(null)

// 监听值更新缓存
watch(CloopNum, (val: any) => {
	setGameCacheData({
		loss: val
	})
})
watch(
	() => props.loopNum,
	(val: number) => {
		CloopNum.value = val + ''
	}
)
watch(
	() => walletStore.walletConfig?.displayCryptoInFiat,
	() => {
		handleBlur()
	}
)
onMounted(() => {
	handleBlur()
	const gameCacheData = getGameCacheData()
	CloopNum.value = gameCacheData?.loss || 0
	emit('changeLoss', CloopNum.value)
})
const handleBlur = () => {
	const valFixed = CloopNum.value
		? transferToNumber(Number(CloopNum.value).toFixed(getDecimalPlaces()))
		: CloopNum.value
	CloopNum.value = String(valFixed)
	emit('changeLoss', valFixed)
}
const handleSelect = () => {
	inputInstRef.value?.select()
}
const onlyAllowNumber = (value: string) => !value || /^\d+(\.\d*)?$/.test(value)
const emit = defineEmits(['changeLoss'])
const changeLoss = (val: string) => {
	const value = !val ? 0 : val
	emit('changeLoss', Number(value))
}
const add = () => {
	CloopNum.value = transferToNumber((+CloopNum.value + 1).toFixed(getDecimalPlaces()))
	emit('changeLoss', CloopNum.value)
}
const down = () => {
	CloopNum.value = transferToNumber((+CloopNum.value - 1).toFixed(getDecimalPlaces()))
	emit('changeLoss', CloopNum.value)
}
</script>

<style lang="scss" scoped>
.input-style {
	border: 2px solid #3e4c68;
	:deep(.n-input__input > .n-input__input-el) {
		height: 100% !important;
	}
}
.f-style {
	font-weight: 600;
}
.b-shadow {
	box-shadow:
		0 1px 3px 0 rgba(0, 0, 0, 0.2),
		0 1px 2px 0 rgba(0, 0, 0, 0.12);
}
.loop-count {
	:deep(.n-input-group-label__border) {
		display: none;
	}
	.point {
		cursor: pointer;
		width: 10px;
		height: 10px;
	}
	.mr-6 {
		margin-right: 6px;
	}
	.moneybox {
		display: flex;

		justify-content: space-between;
		span {
			color: var(--text-396-a-5-aa, #96a5aa);
			font-size: 14px;
			font-style: normal;
			font-weight: 700;
			line-height: 18px; /* 128.571% */
		}
		span:nth-child(2) {
			font-size: 12px;
		}
	}
}
</style>
